<template>
  <div class="baseInfo">
    <div class="baseInfo-top">
      <div class="top-left">
        <div>
          <i class="iconfont icon-LC_icon_user_fill_3 userImg" v-if="!userInfo.user_pic && !avaPic" />
          <img class="userPic" :src="userInfo.user_pic" alt=""  v-if="userInfo.user_pic || avaPic">
          <span :style="{textAlign: 'center'}">
            <el-upload
              class="avatar-uploader" 
              :action="handleUppic()"
              name="user_pic"
              :show-file-list="false" 
              :on-success="handleFileSuccess" 
              :before-upload="beforeUpload" 
              :on-error="handleFileError"
              accept=".jpg,.png"
              >
                +上传头像
              </el-upload>
          </span>
        </div>
        <div class="des">
          欢迎您回来!
        </div>
      </div>
      <div class="top-right">
        <div class="info">
          <div>
            <p><span class="des">账号: </span><span class="black">{{userInfo.user_name}}</span></p>
            <p><span class="des">手机号: </span><span class="black">{{userInfo.user_phone}}</span></p>
            <p><span class="des">电子邮箱: </span><span class="black">{{userInfo.user_email || '暂无'}}</span></p>
          </div>
          <div>
            <p><span class="des">总消费: </span><span class="black">{{userInfo.user_totalPay || '暂无'}}</span></p>
            <p><span class="des">总收入: </span><span class="black">{{userInfo.user_totalGet || '暂无'}}</span></p>
            <p><span class="des">余额: </span><span class="black">{{userInfo.user_restMoney || '暂无'}}</span></p>
          </div>
        </div>
        <div class="buttons">
          <div class="buttons-contain">
            <el-button type="primary" @click="handleModal('changePassword', true)">修改密码</el-button>
            <el-button type="primary" @click="handleModal('reChargeVisible', true)">充值</el-button>
            <el-button type="primary" @click="handleModal('cashVisible', true)">提现</el-button>
            <el-button type="primary" @click="handleModal('detailVisible', true)">明细</el-button>
          </div>
        </div>
      </div>
    </div>
    <div class="baseInfo-bottom">
      <div class="bottom-left">
        <div class="title">
          <div class="left">订单详情</div>
          <div class="right" @click="handleGoMyOrder({ type: '全部订单',orderStatu: 0 })">查询全部订单 ></div>
        </div>
        <div class="content">
          <div class="items">
            <div class="content-des">
              <p class="totle">待付款订单: <span class="num">{{orderNum.UnDoneCount}}</span></p>
              <p class="des" @click="handleGoMyOrder({ type: '待付款',orderStatu: 1 })">查看全部待付款订单 > </p>
            </div>
          </div>
          <div class="items">
            <div class="content-des">
              <p class="totle">已完成订单: <span class="num">{{orderNum.DoneCount}}</span></p>
              <p class="des" @click="handleGoMyOrder({ type: '交易完成',orderStatu: 3 })">查看全部已完成订单 > </p>
            </div>
          </div>
        </div>
      </div>
      <div class="bottom-right">
        <div class="title">
          <div class="left">活动消息</div>
          <div class="right" @click="handleModal('allActVisible',true)">查看全部活动消息 ></div>
        </div>
        <div class="content">
          <p v-for="(item, index) in actMessage" :key="index">
            <span class="theme">●</span>
            <span>{{item.message_content}}</span>
          </p>
        </div>
      </div>
    </div>
    <recharge-modal :visible="reChargeVisible" @close="handleModal('reChargeVisible', false)"/>
    <cash-modal :visible="cashVisible" @close="handleModal('cashVisible',false)"/>
    <detail-modal :visible="detailVisible" @close="handleModal('detailVisible',false)"/>
    <allActModal :visible="allActVisible" @close="handleModal('allActVisible',false)"/>
    <changePassword :visible="changePassword" @close="handleModal('changePassword',false)"/>
  </div>
</template>

<script>
import { mapState, mapActions, mapMutations } from 'vuex';
import CashModal from './modal/cashModal';
import detailModal from './modal/detailModal';
import rechargeModal from './modal/rechargeModal';
import allActModal from './modal/allActModal';
import changePassword from './modal/changePassword'

export default {
  name: '',
  components: {
    CashModal,
    detailModal,
    rechargeModal,
    allActModal,
    changePassword
  },
  computed: {
    ...mapState({
      userInfo: state => state.user.userInfo,
      orderNum: state => state.user.orderNum,
      actMessage: state => state.user.actMessage,
      login: state => state.user.login
    }),
  },
  data () {
    return {
      reChargeVisible: false,
      detailVisible: false,
      cashVisible: false,
      allActVisible: false,
      changePassword: false,
      avaPic: '',
    };
  },
  created(){
    this.fetchOrderCount({ 
      order_userid: this.login ? this.userInfo.user_id : JSON.parse(localStorage.userInfo).user_id
    });
    this.fetchActMessages({ 
      message_userid: this.login ? this.userInfo.user_id : JSON.parse(localStorage.userInfo).user_id
    });
  },
  methods: {
    ...mapMutations({
      saveNewPic: 'user/saveNewPic'
    }),
    ...mapActions({
      fetchOrderCount: 'user/fetchOrderCount',
      fetchActMessages: 'user/fetchActMessages'
    }),
    handleGoMyOrder(order){
      this.$router.push({
        name: 'MyOrder',
        params: { order }
      });
    },
    handleModal(whichVisible, boolean){
      switch(whichVisible){
        case 'reChargeVisible':
          if(this.userInfo.user_realName){
            this.reChargeVisible = boolean;
          }else{
            this.$message({
              type: 'error',
              message: '请先进行实名制并绑定银行卡。',
              showClose: true
            })
          }
          break;
        case 'detailVisible':
          if(this.userInfo.user_realName){
            this.detailVisible = boolean;
          }else{
            this.$message({
              type: 'error',
              message: '请先进行实名制并绑定银行卡。',
              showClose: true
            })
          }
          break;
        case 'cashVisible':
          if(this.userInfo.user_realName){
            this.cashVisible = boolean;
          }else{
            this.$message({
              type: 'error',
              message: '请先进行实名制并绑定银行卡。',
              showClose: true
            })
          }
          break;
        case 'allActVisible':
          this.allActVisible = boolean;
          break;
        case 'changePassword':
          this.changePassword = boolean;
          break;
      }
    },
    handleUppic(){
      return `/api/mall/setUsersTitle?user_id=${this.userInfo.user_id}`
    },
    handleFileSuccess(res, file, fileList){
      this.saveNewPic(res.extend.头像地址);
      this.$message({
        type: 'success',
        message: '上传成功',
        showClose: true
      });
    },
    handleFileError(){
      this.$message({
        type: 'error',
        message: '上传失败,请重新上传。',
        showClose: true
      });
    },
    beforeUpload(FILE){
      const reader = new FileReader();
      reader.readAsDataURL(FILE);
      reader.onload = e => {
        this.avaPic = e.target.result;
      };
    },
  },
}
</script>
<style lang='scss' scoped src="./index.scss" />
<style lang="scss">
.avatar-uploader{
  .el-upload:hover{
    color: $theme-color;
  }
}
</style>